'use strict'
import { App, View, ScrollView } from '../../../component'
import style from './css.css'
import Item from './item'
import config from '../../../config/config'
import { observer, inject } from 'mobx-react'

@inject('user') @observer class HomePage extends React.Component {
  static propTypes = {
    user: PropTypes.object,
    getNum: PropTypes.number,
    history: PropTypes.object
  }
  componentDidMount () {
  }
  _renderItem () {
    const { seeting } = config
    return seeting.map((item, index) => { return (<Item key={index} history={this.props.history} name={item} index={ index }/>) })
  }
  _renderBlance () {
    const { balance } = this.props.user
    if (balance > 0) { return (<View>{ balance }</View>) }
    else { return (<View> 0 </View>) }
  }
  render () {
    let nickname, headImg
    if (this.props.user.userInfo.nickname) {
      headImg = this.props.user.userInfo.avatar
      nickname = this.props.user.userInfo.nickname
    }
    const { getNum } = this.props

    return (
      <ScrollView scrollbars = {false} className={style.homePageWrap}>
        <View className={style.homePage}>
          <View className={style.headInfo}>
            <img className={style.headImg} src={ headImg } alt="" />
            <View className={style.headName}>{ nickname }</View>
          </View>
          <View className={style.selfDetail}>
            <View className={style.successMoney}>
              <View>抓中次数</View>
              <View className={style.text}>{ getNum }&nbsp;次</View>
            </View>
            <View className={style.successMoney}>
              <View>余额</View>
              <View className={style.text}>
                { this._renderBlance() }
                <View className={style.moneyIcon}></View>
              </View>
            </View>
          </View>
          <View className={style.itemWrap}>
            {this._renderItem()}
          </View>
        </View>
      </ScrollView>
    )
  }
}

export default HomePage
